<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>英语自由学</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    英语单词：<input type="text" v-model="en.english"/><br/>
    <input type="button" value="提交" @click="submit(en)"/>
    {{en.english}}

    <p v-if="boolearn">
        存入的英语为：{{da.english}}<br>
        存入的中文为：{{da.chinese}}
    </p>
</div>


</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            en: {english: "请输入英语单词"},
            boolearn: false,
            da: {"english": "null", "chinese": "null"},
            result: {"status": "null", "errmsg": "null", "data": "null"}

        },
        methods: {
            submit: function (en) {
                // 关闭返回结果在页面显示
                vm.boolearn = true;

                // 发送post请求
                axios.post("add/english", en)

                // 正常返回情况处理(200)
                    .then(function (response) {
                        // 对返回值进行显示

                        vm.result = response.data;
                        console.log(vm.result.status);
                        console.log("正常返回");
                        // alert(vm.result.status);
                        console.log(vm.result.errmsg);
                        alert(vm.result.errmsg);
                        // 将返回值显示到页面上
                        vm.da = vm.result.data;
                        vm.boolearn = true;
                    })

                    // 异常返回值处理 (102、103、105)
                    .catch(function (error) {
                        vm.result = response.data;
                        // console.log(vm.result.status);
                        alert(vm.result.status);
                        console.log(vm.result.errmsg);
                        console.log("返回异常");
                        alert(vm.result.errmsg);
                    });

            }
        }

    })
</script>
</html>
